<template>
  <layout-content
    v-loading="uiState.loading"
    :header="$t('commons.form.detail')"
    :back-to="{ name: 'Pods' }"
  >
    <div v-if="!uiState.yamlShow && podDetails">
      <k-segment-tab index="basic">
        <k-segment-tab-pane name="basic" label="基本信息" width="120">
          <el-card class="el-card">
            <table style="width: 100%" class="myTable">
              <tr>
                <th scope="col" align="left">
                  <el-text>{{ $t("business.common.basic") }}</el-text>
                </th>
                <th scope="col" />
              </tr>
              <tr>
                <td>
                  <el-text>{{ $t("commons.table.name") }}</el-text>
                </td>
                <td colspan="4">{{ podDetails.metadata.name }}</td>
              </tr>
              <tr>
                <td>
                  <el-text>{{ $t("business.namespace.namespace") }}</el-text>
                </td>
                <td colspan="4">{{ podDetails.metadata.namespace }}</td>
              </tr>
              <tr>
                <td><el-text>Pod IP</el-text></td>
                <td colspan="4">{{ podDetails.status.podIP ?? "-" }}</td>
              </tr>
              <tr>
                <td>
                  <el-text>{{ $t("business.cluster.nodes") }}</el-text>
                </td>
                <td colspan="4">
                  <span>
                    {{ podDetails.spec.nodeName }}
                  </span>
                  <span> ({{ podDetails.status.hostIP }}) </span>
                </td>
              </tr>
              <tr>
                <td>
                  <el-text>{{ $t("commons.table.created_time") }}</el-text>
                </td>
                <td colspan="4">
                  {{ getAge(podDetails.metadata.creationTimestamp) }}
                </td>
              </tr>
              <tr>
                <td>
                  <el-text>{{ $t("commons.table.status") }}</el-text>
                </td>
                <td colspan="4">
                  {{ $t("commons.status." + podDetails.status.phase) }}
                </td>
              </tr>
            </table>
            <div class="bottom-button">
              <el-button @click="uiState.yamlShow = !uiState.yamlShow">
                {{ $t("commons.button.view_yaml") }}
              </el-button>
            </div>
          </el-card>

          <el-card class="el-card mt-3">
            <h3>{{ $t("business.common.conditions") }}</h3>
            <complex-table :data="podDetails.status.conditions">
              <el-table-column
                :label="$t('business.pod.type')"
                prop="type"
                min-width="30"
                show-overflow-tooltip
              />
              <el-table-column
                :label="$t('commons.table.status')"
                prop="status"
                min-width="30"
              />
              <el-table-column
                :label="$t('business.workload.lastTransitionTime')"
                min-width="50"
              >
                <template #default="{ row }">
                  {{ timeTrans(row.lastTransitionTime) }}
                </template>
              </el-table-column>
            </complex-table>
          </el-card>
        </k-segment-tab-pane>

        <k-segment-tab-pane name="spec" label="spec" width="120">
          <h2 style="margin-top: 40px">Spec</h2>
          <el-row :gutter="20" style="margin-top: 20px" class="row-box">
            <el-col :span="8">
              <el-card class="el-card">
                <ko-detail-general :yamlInfo="podDetails" />
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card class="el-card">
                <ko-detail-volume :yamlInfo="podDetails" />
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card class="el-card">
                <ko-detail-toleration :yamlInfo="podDetails" />
              </el-card>
            </el-col>
          </el-row>
        </k-segment-tab-pane>
        <k-segment-tab-pane name="event" label="事件" width="120">
          <h2 style="margin-top: 40px">{{ $t("business.event.event") }}</h2>
          <complex-table :data="eventList">
            <el-table-column
              :label="$t('commons.table.type')"
              prop="type"
              min-width="20"
              show-overflow-tooltip
              fix
            />
            <el-table-column
              :label="$t('business.pod.reason')"
              prop="reason"
              min-width="20"
              show-overflow-tooltip
              fix
            />
            <el-table-column
              :label="$t('commons.table.name')"
              prop="metadata.creationTimestamp"
              show-overflow-tooltip
              min-width="45"
            >
              <template #default="{ row }">
                {{ timeTrans(row.metadata.creationTimestamp) }}
              </template>
            </el-table-column>
            <el-table-column
              :label="$t('business.workload.source')"
              min-width="50"
            >
              <template #default="{ row }">
                <div v-for="(item, index) in row.source" :key="index">
                  <el-tag type="success">{{ item }}</el-tag>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              :label="$t('business.pod.message')"
              prop="message"
              min-width="150"
            />
          </complex-table>
        </k-segment-tab-pane>

        <k-segment-tab-pane name="container" label="container" width="120">
          <h2 style="margin-top: 40px">
            {{ $t("business.workload.container") }}
          </h2>
          <div class="w-full">
            <ko-detail-containers
              :yamlInfo="podDetails"
              :cluster="query.cluster"
            />
          </div>
        </k-segment-tab-pane>
      </k-segment-tab>
    </div>
    <div v-else-if="uiState.yamlShow">
      <yaml-editor :value="podYamlObject" :read-only="true" />
      <div class="bottom-button">
        <el-button @click="uiState.yamlShow = !uiState.yamlShow">
          {{ $t("commons.button.back_detail") }}
        </el-button>
      </div>
    </div>
  </layout-content>
</template>

<script setup lang="ts">
import LayoutContent from "@/views/domain/kubeHud/views/components/layout/LayoutContent.vue";
import YamlEditor from "@/views/domain/kubeHud/views/components/yaml-editor/index.vue";
import KoDetailContainers from "@/views/domain/kubeHud/views/components/detail/detail-containers.vue";
import KoDetailGeneral from "@/views/domain/kubeHud/views/components/detail/pod/detail-general.vue";
import KoDetailVolume from "@/views/domain/kubeHud/views/components/detail/pod/detail-volume.vue";
import KoDetailToleration from "@/views/domain/kubeHud/views/components/detail/pod/detail-toleration.vue";
import ComplexTable from "@/views/domain/kubeHud/views/components/complex-table/index.vue";
import KSegmentTab from "@/views/domain/kubeHud/views/components/KSegmentTab/index.vue";
import KSegmentTabPane from "@/views/domain/kubeHud/views/components/KSegmentTab/KSegmentTabPane.vue";

import {
  fieldSelectorStr,
  getAge,
  objectToString,
  objectToYaml,
  timeTrans
} from "@/views/domain/kubeHud/utils";
import { useVerifyRouter } from "@/router/use";
import { computed, onMounted, reactive, ref } from "vue";
import { Event, Pod, useK8SApi } from "@/views/domain/kubeHud/api/k8s";

const { podRepo, eventsRepo } = useK8SApi();
const router = useVerifyRouter();

type Prop = {
  name?: string;
  namespace?: string;
  cluster?: string;
};
const props = defineProps<Prop>();

const podDetails = ref<Pod>();
const _podYaml = ref<string>();
const podYamlObject = computed(() => {
  if (!_podYaml.value || _podYaml.value === "") {
    // eslint-disable-next-line vue/no-side-effects-in-computed-properties
    _podYaml.value = objectToYaml(podDetails.value);
  }

  return _podYaml.value;
});

const eventList = ref<Event[]>([]);

const query = reactive({
  name: props.name,
  namespace: props.namespace,
  cluster: props.cluster
});

const uiState = reactive({
  loading: false,
  yamlShow: false
});

const getPodDetail = async () => {
  uiState.loading = true;
  podRepo
    .getPodDetail({ srcName: query.name, namespace: query.namespace })
    .then(res => {
      if (res) {
        podDetails.value = res;
        getPodEvents();
      }
    })
    .finally(() => {
      uiState.loading = false;
    });
};

const getPodEvents = async () => {
  eventsRepo
    .listEvents({
      srcName: query.name,
      namespace: query.namespace,
      query: {
        fieldSelector: fieldSelectorStr({
          "involvedObject.name": query.name,
          "involvedObject.namespace": query.namespace,
          "involvedObject.uid": podDetails.value.metadata.uid,
          limit: 500
        })
      }
    })
    .then(res => {
      if (res?.items) {
        eventList.value = res.items;
      }
    });
};

onMounted(() => {
  router.validate().then(() => {
    const { name, namespace, cluster } = router.query;
    query.name = name ?? "";
    query.namespace = namespace ?? "";
    query.cluster = cluster ?? "";

    getPodDetail();
  });
});
</script>

<style scoped lang="scss">
.row-box {
  width: 100%;
  :deep(.el-card) {
    height: 100%;
  }
}
</style>
